<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="Robots" content="noindex, nofollow">
<title>Floatbox v5.2 API Reference</title>
<style type="text/css">
body { font-family:Verdana, Arial, Helvetica, sans-serif; line-height: 17px; font-size:13px; background-color:#fafafa; }
#content { margin:1em 25px; }
h2 { font-size:1.3em; margin:.7em 0 .2em 0; color:#046; }
h3 { font-size:1.15em; margin:-.3em 0 .8em 0; color:#046; }
h4 { font-size:1em; margin:.7em 0 0 0; color:#046; }
h5 { font-size:.9em; margin:1.2em 0 0 0; }
p { margin:.6em 0 0 1.5em; }
.code, .blockcode { font-family:"Courier New", Courier, monospace; font-size:0.85em; color:#603; background-color:#eaeaea; }
.blockcode { display:block; margin-top:0.5em; }
ul, ol { margin-top:.4em; }
li { margin-top:.3em; }
ul.index ul { list-style-type:none; margin:0 0 7px 15px; padding:0; }
.index li { margin-top:.2em; }
div.separator { height:1px; width:80%; font-size:1px; margin:24px 0; border-color:#000; border-style:solid; border-width:1px 0; }
</style>
</head>
<body>
<div id="content">
<h2>Floatbox v5.2 - Programmer's API Reference</h2>
<a href="//floatboxjs.com/">floatboxjs.com</a>
<div id="index" class="separator"></div>

<h4>Index</h4>
<ul class="index">
<li><a href="#variables">Variables and Properties</a>
<ul>
<li>fb</li>
<li>fb.instances</li>
<li>fb.lastInstance</li>
<li>fb.topInstance</li>
<li>&lt;instance&gt;.fbContent</li>
<li>fb.click</li>
<li>fb.ieVersion</li>
<li>fb.mobile</li>
</ul>
</li>
<li><a href="#functions">Floatbox Functions</a>
<ul>
<li>fb.start ( source, options )</li>
<li>fb.end ( arg )</li>
<li>fb.activate ( node )</li>
<li>fb.ownerInstance ( node )</li>
<li>fb.resize ( width, height, instance )</li>
<li>fb.reload ( source, instance )</li>
<li>fb.goBack ( instance )</li>
<li>fb.cycleStop ( )</li>
<li>fb.cycleGo ( )</li>
<li>fb.pause ( bool, instance )</li>
<li>fb.showItem ( index, instance )</li>
</ul>
</li>
<li><a href="#callbacks">Event Callbacks</a>
<ul>
<li>beforeBoxStart</li>
<li>afterBoxStart</li>
<li>beforeItemStart</li>
<li>afterItemStart</li>
<li>beforeItemEnd</li>
<li>afterItemEnd</li>
<li>beforeBoxEnd</li>
<li>afterBoxEnd</li>
<li>afterResize</li>
<li>beforePrint</li>
<li>afterPrint</li>
<li>afterFBLoaded</li>
</ul>
</li>
<li><a href="#library">Library Functions</a>
<ul>
<li>fb.$ ( id )</li>
<li>fb.DOMReady ( func )</li>
<li>fb.addEvent ( node, action, func )</li>
<li>fb.removeEvent ( node, action, func )</li>
<li>fb.stopEvent ( e )</li>
<li>fb.extend ( objTarget, objSource [, objSource2 ...] )</li>
<li>fb.executeJS ( strURI, callback )</li>
<li>fb.getFormValues ( source )</li>
<li>fb.serialize ( source )</li>
<li>fb.deserialize ( str )</li>
<li>fb.preload ( src, callback )</li>
<li>fb.printNode ( node, style )</li>
<li>fb.getElementsByClassName ( className[s], node )</li>
<li>fb.getStyle ( node, property, integerize )</li>
<li>fb.getScrollLeft ( )</li>
<li>fb.getScrollTop ( )</li>
<li>fb.getScroll ( )</li>
<li>fb.getViewportWidth ( )</li>
<li>fb.getViewportHeight ( )</li>
<li>fb.getViewport ( )</li>
<li>fb.getLayout ( node, local )</li>
<li>fb.getIframeDocument ( node )</li>
<li>fb.getIframeWindow ( node, allowCrossDomain )</li>
<li>fb.nodeContains ( parent, child )</li>
<li>fb.hasAttribute ( node, attribute )</li>
<li>fb.getOuterHTML ( node )</li>
<li>fb.setInnerHTML ( node, html )</li>
<li>fb.encodeHTML ( html )</li>
<li>fb.decodeHTML ( html )</li>
<li>fb.typeOf ( thing )</li>
<li>fb.forEach ( object, function )</li>
<li>fb.flashObject ( {<br />
&nbsp;&nbsp;&nbsp;&nbsp; source: strURI,<br />
&nbsp;&nbsp;&nbsp;&nbsp; width: numPixels,<br />
&nbsp;&nbsp;&nbsp;&nbsp; height: numPixels,<br />
&nbsp;&nbsp;&nbsp;&nbsp; params: { name: value [, name: value] } | strOptions,<br />
&nbsp;&nbsp;&nbsp;&nbsp; node: node | id,<br />
&nbsp;&nbsp;&nbsp;&nbsp; id: string,<br />
&nbsp;&nbsp;&nbsp;&nbsp; altContent: strHTML,<br />
&nbsp;&nbsp;&nbsp;&nbsp; minVersion: strVersion<br />
} )</li>
<li>fb.ajax ( {<br />
&nbsp;&nbsp;&nbsp;&nbsp; source: strURI,<br />
&nbsp;&nbsp;&nbsp;&nbsp; updateNode: node,<br />
&nbsp;&nbsp;&nbsp;&nbsp; postData: form | formID | formName | object | string,<br />
&nbsp;&nbsp;&nbsp;&nbsp; success: function( xhr ),<br />
&nbsp;&nbsp;&nbsp;&nbsp; failure: function( xhr ),<br />
&nbsp;&nbsp;&nbsp;&nbsp; finish: function( xhr ),<br />
&nbsp;&nbsp;&nbsp;&nbsp; timeout: msecs,<br />
&nbsp;&nbsp;&nbsp;&nbsp; headers: { name: value [, name: value] }<br />
} )</li>
</ul>
</li>
</ul>

<div id="variables" class="separator"></div>
<h4>Variables and Properties</h4>

<h5>fb</h5>
<p>
Floatbox's primary object is the global variable "fb".<br />
The API functions and variables are all accessed as properties of this fb namespace.<br />
Each window that includes floatbox.js in its document has its own fb object defined and available.<br />
If a child iframe does not have floatbox.js included in its document,
the Floatbox API can still be accessed from the parent or top document using "parent.fb" or "top.fb".
</p>

<h5>fb.instances</h5>
<p>
Floatbox can display multiple boxes at one time, such as when displaying an info box over top of a displayed image or when showing multiple non-modal sibling boxes.<br />
Each floatbox instance that is opened is added to the fb.instances array.<br />
The order of the array is always the chronological order in which the boxes were opened.<br />
The primary or first floatbox is always fb.instances[0].
</p><p>
Floatbox component nodes and some API functions are properties of the instances.
For example: <span class="code notranslate">fb.instances[1].fbContent</span> and <span class="code notranslate">fb.topInstance.resize( )</span>.<br />
For convenience and legacy code support, the component nodes such as fbContent for the first loaded floatbox are accessible as properties of the top page's "fb" object.
E.g., <span class="code notranslate">fb.fbContent</span> is equivalent to <span class="code notranslate">fb.instances[0].fbContent</span>.<br />
</p><p>
Most API functions that act on a particular instance can be called as a member function of the instance, or can be called from the "fb" namespace with an optional instance parameter.
When calling from the fb namespace, if the instance parameter is not provided, the instance acted upon will be the clicked floatbox (if clicked) or fb.topInstance.
</p>

<h5>fb.lastInstance</h5>
<p>
fb.lastInstance always points to the most recently loaded floatbox instance.<br />
If no floatboxes are open, fb.lastInstance will be null or undefined.<br />
fb.lastInstance is always identical to fb.instances[fb.instances.length-1].<br />
For legacy code support, the deprecated fb.lastChild is still available on the API and is equivalent to fb.lastInstance.
</p>

<h5>fb.topInstance</h5>
<p>
If you are working with modal floatboxes (the default), fb.topInstance will always be the same as fb.lastInstance.<br />
Multiple non-modal floatboxes can have their stack order changed by user interaction or by code.<br />
When non-modal boxes are re-stacked, fb.topInstance will always point to the box that is currently displayed on top of all others.<br />
For legacy code support, the deprecated fb.topBox is still available on the API and is equivalent to fb.topInstance.
</p>

<h5>&lt;instance&gt;.fbContent</h5>
<p>
fbContent is the DOM node (element) holding the content that is displayed by a floatbox.
It may be an img, iframe, or div depending on what kind of content is currently showing.<br />
Having this node reference can be helpful when dynamically working with floatboxed iframe or div html content.<br />
Use the 'lastInstance', 'topInstance', or the 'instances' array of pointers to get to the fbContent element for secondary (stacked) floatboxes
- e.g. <span class="code notranslate">fb.topInstance.fbContent</span> or <span class="code notranslate">fb.instances[2].fbContent</span>.<br />
For convenience and legacy code support, the fbContent node for the first or primary floatbox can be accessed from the top document's fb object as <span class="code notranslate">fb.fbContent</span>.
</p>

<h5>fb.click</h5>
<p>
An object with three properties, 'x', 'y', and 'target', which give information about the most recent mouse click.
The 'x' and 'y' values are the click's location relative to the browser viewport.
The 'target' value is the DOM node that received the mouse click.<br />
The fb.click values 'see through' iframes in that if a click occurs inside an iframe element, the yielded coordinates will still be those from the main window's frame of reference.<br />
Touch gestures will be captured in the fb.click object on mobile devices that don't have mice.<br />
The fb.click values persist for only 600 milliseconds after the click event to avoid having stale information supplied to executing code.<br />
Example usage: <span class="code notranslate">someNode.style.left = fb.click.x + 'px';</span>
</p>

<h5>fb.ieVersion</h5>
<p>
An integer indicating which version of Internet Explorer (if any) the visitor is currently using.
fb.ieVersion will be 0 in non-IE browsers and will be 6 or greater in IE.<br />
Example usage: <span class="code notranslate">if ( fb.ieVersion && fb.ieVersion < 9 ) ...</span>
</p>

<h5>fb.mobile</h5>
<p>
This will be set to true if the visitor's browser is Mobile Safari based, such as an iPhone or Android device.
</p>

<p>
<a href="#index">Back to Index</a>
</p>

<div id="functions" class="separator"></div>
<h4>Functions</h4>

<h5>fb.start ( source, options )</h5>
<p>
fb.start creates and invokes a floatbox.<br />
The 'source' parameter is overloaded. It can be a URI string (path to the content), a DOM element, an element's id, or a string of HTML.<br />
The optional 'options' parameter can accept a string of floatbox options formatted the same as for data-fb-options attributes,
or can accept an associative array of option name:value pairs.<br />
For support of legacy code, fb.start will still accept the deprecated object parameter <span class="code notranslate">{ href: strURL, rev: strOptions, title: strTitle, html: strHTML }</span>.
</p><p>
Examples:<br />
Load an image in floatbox with some options.<br />
<span class="code notranslate">fb.start( 'path/image.jpg', 'controlsPos:tr caption:`my caption`' );</span><br />
or <span class="code notranslate">fb.start( 'path/image.jpg', { controlsPos: 'tr', caption: 'my caption' } );</span><br /><br />
Launch an existing anchor in floatbox. Pass the anchor element or its id to fb.start().<br />
<span class="code notranslate">fb.start( 'someAnchorId' );</span>
or <span class="code notranslate">fb.start( fb.$('someAnchorId') );</span><br /><br />
Open inline hidden div content.<br />
<span class="code notranslate">fb.start( '#someDivId' );</span>
or <span class="code notranslate">fb.start( fb.$('someDivId') );</span><br /><br />
Use direct html as the content source.<br />
<span class="code notranslate">fb.start( '&lt;p&gt;hello world&lt;/p&gt;', 'roundCorners:none showClose:false' );</span><br />
(The direct content string must contain '&lt;' and '&gt;' to be recognized as html.)<br /><br />
A dynamically added anchor could launch itself in floatbox with:<br />
<span class="code notranslate">
&lt;a href="image1.jpg" onclick="fb.start( this ); return false;"&gt;click me&lt;/a&gt;
</span><br />
The anchor does not need a floatbox class and does not have to be activated by fb.activate().<br />
</p><p>
Note that the options parameter can itself contain a 'source' option which will override the first source parameter.
This allows you to define the entire start action in one associative array, and invoke a box based on that array with
<span class="code notranslate">fb.start( null, myOptionsObject );</span>
</p>

<h5>fb.end ( arg )</h5>
<p>
Call fb.end() to close a running floatbox.<br />
The 'arg' parameter is optional.<br />
With multiple boxes open, you can close a particular one by passing the instance number or the actual floatbox instance object.
E.g., <span class="code notranslate">fb.end( 1 )</span> and <span class="code notranslate">fb.end( fb.instances[1] )</span> are equivalent.<br />
If 'arg' is a boolean value of true, all boxes will be closed.<br />
If 'arg' is a string and there is only one floatbox currently open,
arg is assumed to be a URL and the base page will attempt to navigate to that URL when the floatbox end completes.
The string 'self' will cause the currently loaded base page to refresh, while 'back' will load the previous item from the browser's history.<br />
</p><p>
If an instance is not specified by the 'arg' parameter, the floatbox instance to be closed will be either the box containing the element that was clicked to invoke the code that calls fb.end, or fb.topInstance.<br />
The 'end' function is also available directly on each instance.  For example: <span class="code notranslate">fb.instances[1].end( )</span><br />
</p><p>
Typical usage: <span class="code notranslate">fb.end( )</span>.<br />
To navigate to a page on exit: <span class="code notranslate">fb.end( 'somePage.html' )</span>.
</p>

<h5>fb.activate ( node )</h5>
<p>
fb.activate crawls a node or a document and assigns actions to elements that are marked up for some kind of floatbox behaviour.<br />
It activates floatboxed anchors, image cycler sets, enhanced tooltips and popup thumbnails.<br />
If you dynamically add floatbox-enabled elements to a page after the initial page load,
fb.activate needs to be run against the new content to attach floatbox behaviours to it.<br />
Until activated, a floatboxed anchor will open just like a normal link and the browser will navigate to the href'd page.
</p><p>
The 'node' parameter is optional.
If provided, it should be a node's id or the node object itself that contains the elements requiring activation.
If the node parameter is not provided, the entire document will be crawled.
</p><p>
The easiest way to fetch and add new content is with the floatbox library function fb.ajax, described below.<br />
When you use this function with its updateNode parameter, fb.activate will be automatically run against that node for you.<br />
</p><p>
For any other method of dynamically adding new floatbox content, your code will have to invoke fb.activate after the new content is in place
(or, alternatively, have an onclick action of <span class="code notranslate">onclick="fb.start( this ); return false;"</span> assigned).<br />
See the section about dynamically loading floatbox content in <a href="instructions#dynamic">the instructions</a> for examples of using fb.activate with traditional ajax calls, jQuery and ASP.NET UpdatePanels.<br />
</p><p>
(For legacy code support, the deprecated functions fb.activateElements and fb.tagAnchors are still available and still work as aliases for fb.activate.)
</p>

<h5>fb.ownerInstance ( node )</h5>
<p>
ownerInstance accepts a DOM node or an id string and returns the floatbox instance (if any) that owns or contains the passed node.<br />
If the referenced node is not in a floatbox, ownerInstance returns null.<br />
The ability to determine the ownerInstance of a node can be handy when multiple floatboxes are open and you want to execute an API action against a particular instance.<br />
</p><p>
Example - Close the floatbox that contains a node with an id of 'myForm':<br />
<span class="code notranslate">fb.end( fb.ownerInstance( fb.$( 'myForm' ) ) );</span>
</p>

<h5>fb.resize ( width, height, instance )</h5>
<p>
Resizes a floatbox instance to the new requested dimensions.<br />
Width and height are the new content dimensions in pixels, not including the box decoration around the content.<br />
If neither width nor height are given, or are both passed as 0, the current box content will be measured and the floatbox height will be resized to the current content's height.<br />
If either width or height is 0 or not provided, but the other dimension is given a positive value, the 0 dimension will retain its original value while the positive dimension will be set as requested.<br />
To request a specific width and a remeasure of the height, pass -1 for the height.<br />
</p><p>
If multiple boxes are open, a particular box can be targeted for resizing by passing the floatbox instance object or its instance number as the third parameter.
If no instance parameter is provided, the clicked box will be resized if the call resulted from a user click action, otherwise the top box (fb.topInstance) will be resized.<br />
</p><p>
Examples:<br />
If the html content in a floatbox has just been dynamically changed in some fashion,
the box can be resized to the same width and the new content's height with a simple call of <span class="code notranslate">fb.resize( );</span><br />
A specific new width combined with a re-measure of the height can be requested with <span class="code notranslate">fb.resize( 350, -1 );</span>
With multiple floatboxes, the second instance can have its height measured and resized with either <span class="code notranslate">fb.resize( 0, 0, 2 );</span> or <span class="code notranslate">fb.instances[2].resize( );</span>
</p>

<h5>fb.reload ( source, instance )</h5>
<p>
Reloads the content in an already running box.<br />
Only content of types iframe, image and ajax can be reloaded. Inline, media and direct content cannot be.<br />
The optional 'source' parameter is a URI path to new content that can replace current box content of the same type without altering or resizing the existing box.
Standard usage leaves the 'source' parameter empty thereby causing the existing content to be re-fetched.<br />
If multiple boxes are open, a particular box can be targeted for the reload by passing the floatbox instance or its instance number as the second parameter.<br />
If the 'instance' parameter is not provided, the targetted floatbox instance will be the one the user clicked in to invoke the fb.reload() call, or else fb.topInstance.<br />
</p><p>
The 'reload' function is also available directly on each instance.  For example: <span class="code notranslate">fb.instances[1].reload( )</span> will have the same effect as <span class="code notranslate">fb.reload( null, 1)</span>.
</p>

<h5>fb.goBack ( instance )</h5>
<p>
If a previous item has been displayed in a floatbox instance
(either because a gallery set is running or content has been updated with either fb.reload or by fb.start combined with the sameBox:true option)
fb.goBack will reload the item displayed immediately prior to the current item.<br />
If the optional 'instance' parameter is not provided, the targetted floatbox instance will be the one the user clicked in to invoke the fb.goBack() call, or else fb.topInstance.<br />
</p><p>
The 'goBack' function is also available directly on each instance.  For example: <span class="code notranslate">fb.lastInstance.goBack( )</span>.
</p>

<h5>fb.cycleStop ( )<br />
fb.cycleGo ( )</h5>
<p>
Suspends and resumes all cycler thumbnail and image sets on a page.
</p>

<h5>fb.pause ( bool, instance )</h5>
<p>
<span class="code notranslate">fb.pause( true )</span> pauses a running slideshow and <span class="code notranslate">fb.pause( false )</span> resumes a paused one.<br />
As with many of the other API calls, when multiple floatbox instances are present fb.pause will default to the clicked instance or to fb.topInstance, and the pause function is available directly on each instance object.
</p>

<h5>fb.showItem ( index, instance )</h5>
<p>
Displays item number 'index' from a currently loaded gallery set. The first item in a set has an index of 0.<br />
With multiple concurrent floatboxes, the default instance will be the clicked floatbox or fb.topInstance.<br />
The showItem function is also available directly on the individual instance objects. For example:<br />
<span class="code notranslate">fb.showItem( 3 )</span> and <span class="code notranslate">fb.topInstance.showItem( 3 )</span> are equivalent.
</p>

<p>
<a href="#index">Back to Index</a>
</p>

<div id="callbacks" class="separator"></div>
<h4>Event Callbacks</h4>
<p>
Floatbox will look for callback functions that you define for the following events:<br />
<span style="font-weight:bold;">beforeBoxStart, afterBoxStart, beforeItemStart, afterItemStart, beforeItemEnd, afterItemEnd, beforeBoxEnd, afterBoxEnd, afterResize, beforePrint, afterPrint, afterFBLoaded</span>.
</p><p>
Javascript code is assigned to options of those names in the standard options setting manner of putting them in fbPageOptions or on an anchor's rev or data-fb-options attribute.<br />
Callbacks defined in a page's fbPageOptions definition can be either true javascript functions or strings to be eval'd.<br />
By their nature, callbacks defined as options in an anchor's rev tag will be strings and so will be eval'd.
</p><p>
If any of the before* callback functions return a value of false, the associated Floatbox action will be cancelled.<br />
This applies only to callbacks defined as true functions. Eval strings cannot cancel Floatbox actions.
</p><p>
Example - A function callback in the page options:
<span class="blockcode notranslate">
function myFunc() {<br />
&nbsp;&nbsp;alert( 'eat a peach' );<br />
&nbsp;&nbsp;return true;<br />
}<br />
fbPageOptions = {<br />
&nbsp;&nbsp;beforeBoxStart: myFunc<br />
};
</span>
</p><p>
And a string callback in an anchor's data-fb-options (or rev) attribute:
<span class="blockcode notranslate">
&lt;a href="xyz.php" class="floatbox" data-fb-options="afterItemEnd:`myFunc();`"&gt;talk about fruit&lt;/a&gt;
</span>
<br />(Don't forget the back-quotes. They're required for correct parsing.)
</p><p>
afterFBLoaded can be considered deprecated but is still available.
Use <span class="code notranslate">fb.DOMReady( function )</span> for cross-browser DOMContentReady invocation.
</p>

<p>
<a href="#index">Back to Index</a>
</p>

<div id="library" class="separator"></div>
<h4>Library Functions</h4>
<p>
In addition to the floatbox functions described above, the fb object exposes a comprehensive set of functions that allow you to use floatbox as a javascript library.<br />
The floatbox library is a robust and correct collection of functions that make it easy to manage ajax, flash, events, forms, DOM interactions and many other operations simply and reliably across all client browsers.
</p><p>
Note: All library functions that have a 'node' parameter will accept either a DOM element or the id string for an element as that parameter.
</p>

<h5>fb.$ ( id )</h5>
<p>
The fb.$ function is short-hand for 'document.getElementById', with minor extensions.<br />
If the id parameter is a string, it will return the element that has that id, or null if there is no such element.<br />
If the id parameter is already an element, that element will be returned.<br />
If a match is not found on the current document, each floatbox instance will be searched.<br />
This function can also be invoked as 'fb$()', without the dot, for historical reasons.
</p>

<h5>fb.DOMReady ( func )</h5>
<p>
Use fb.DOMReady to register a function to be called when (or after) a document's DOM is fully loaded but before window.onload fires.
The single parameter is a function to be exectured at DOMContentLoaded time.<br />
The fb.DOMReady function supports all browsers, including older versions of IE that do not have built-in support for DOMContentLoaded.
</p><p>
Note that fb.addEvent can also register a DOMReady function with <span class="code notranslate">fb.addEvent( document, 'DOMContentLoaded', func )</span>.
The difference is, fb.addEvent will not fire the function if it is registerd after DOMContentLoaded has occurred and will not register duplicates of a function,
whereas fb.DOMReady will immediately execute the passed function if it is called after DOMContentLoaded and will be happy to execute the same function as many times as requested.
</p>

<h5>fb.addEvent ( node, action, func )<br />
fb.removeEvent ( node, action, func )<br />
fb.removeEvent ( obj )</h5>
<p>
These two functions standardize DOM2 event handling across different browsers,
removing most of the troublesome characteristics of IE's event handlers.<br />
All parameters are required.<br />
The 'node' parameter is the element (or its id) to attach (or detach) the event handler to.<br />
The 'action' parameter is the event you want to target and does not include the 'on' prefix used by IE (e.g., use 'load' and not 'onload').<br />
The event handler code is passed as a function in the third parameter.<br />
Using fb.addEvent in Internet Explorer adds the following enhancements to IE's event handling to make it more similar to standards-based DOM2 events:
</p>
<ul>
<li>correctly sets the 'this' keyword in the event handler function</li>
<li>passes the fired event object as a parameter to the event handler function</li>
<li>sets the event.target attribute to the element that fired the event</li>
</ul>
<p>
The return value for fb.addEvent is a js object that can be passed to fb.removeEvent to detach the assigned event handler.
Retaining this value for future event removal helps minimize memory leaks in IE.<br />
</p><p>
Example: <span class="blockcode notranslate">
x = fb.addEvent ( 'someId', 'click', function ( e ) {<br />
&nbsp;&nbsp;alert ( 'type of element clicked: ' + e.target.nodeName );<br />
} );<br />
fb.removeEvent ( x );
</span>
</p><p>
fb.addEvent and fb.removeEvent can also be used to assign and remove DOM0 events by having the action parameter begin with 'on'.
For example, <span class="code notranslate">fb.addEvent ( someNode, 'onclick', someFunc )</span>
will assign a DOM0 click action equivalent to <span class="code notranslate">someNode.onclick = someFunc</span>.
The return value is still a javascript object that can be passed to fb.removeEvent.
</p>

<h5>fb.stopEvent ( e )</h5>
<p>
fb.stopEvent is a cross-browser way to stop normal execution, including bubbling and propagation, of an event.<br />
Pass the event you want to block as the only parameter.<br />
stopEvent's return value is always a boolean false that can be passed through by your calling function.<br />
For example, to stop the default click behaviour in the example above for addEvent, we would make our click function would look like this:<br />
<span class="code notranslate">function( e ) { alert( ... ); return fb.stopEvent( e ); } )</span>
</p>

<h5>fb.extend ( objTarget, objSource [, objSource2 ...] )</h5>
<p>
fb.extend takes two or more javascript objects as parameters and extends the properties and values of the first object with those from the other objects.<br />
The target object is modified in place and is also the return value of the function.<br />
If passed only a single object in the parameters, fb.extend will return a duplicate copy of that object.<br />
<span class="code notranslate">fb.extend( myObj, yourObj )</span> will copy yourObj's name:value pairs into myObj.<br />
<span class="code notranslate">ourObj = fb.extend( {}, myObj, yourObj )</span> returns a new merged object without modifying myObj.<br />
<span class="code notranslate">newObj = fb.extend( oldObj )</span> returns a new object seeded with name:value pairs from oldObj.
</p>

<h5>fb.executeJS ( strURI, callback )</h5>
<p>
Use fb.executeJS to dynamically load and execute an external javascript file.<br />
The javascript file can come from any domain (cross-domain scripting restrictions are not in effect).<br />
The optional callback function will be fired after the external javascript has completed execution.<br />
fb.executeJS can be useful for loading javascript files in a document after the page has been rendered.
It is also a good mechanism for fetching JSONC/JSONP data or loading API services such as those from Google Code.<br />
For example, Google's translation widget can be dynamically added to a page with something like
<span class="blockcode notranslate">
&lt;script&gt;<br />
&nbsp;&nbsp;function init() { ... }<br />
&nbsp;&nbsp;fb.executeJS( "//translate.google.com/translate_a/element.js?cb=init"><br />
&lt;/script&gt;
</span>
</p>

<h5>fb.getFormValues ( source )</h5>
<p>
Returns an associative array of all the name:value pairs for the elements of a form.<br />
The source parameter can be a form DOM element, a form's name, or a form's id.<br />
The getFormValues function provides correct form handling as per the W3C forms recommendations
and properly handles empty and missing values, radio buttons and user defined input types.<br />
The following input element types are ignored: file, image, reset, submit and button.
</p>

<h5>fb.serialize ( source )</h5>
<p>
serialize returns a properly encoded string of name=value pairs that can be used as a URI's querystring
or for submission by an AJAX POST call.<br />
The source parameter accepts any of an associative array, a form DOM element, a form's name, or a form's id.<br />
If a form is passed as the source, the values are first parsed out using getFormValues and the result of that is serialized.
</p>

<h5>fb.deserialize ( str )</h5>
<p>
deserialize reverses the serialize function by taking an encoded parameter string as its argument
and returning an associative array of decoded name:value pairs.
</p>

<h5>fb.preload ( src, callback )</h5>
<p>
You can borrow floatbox's image preloader if you like.
Pass fb.preload the source path for the image to preload as a string.
Or, pass an array of source path strings for images to be preloaded.<br />
If the optional callback function is provided as the second parameter, that function will be invoked when the image preload completes.<br />
The callback function can accept a single parameter that will be the unattached img element containing the preloaded image.<br />
If src is an array, callback is called after the last image loads.
</p>

<h5>fb.printNode ( node, style )</h5>
<p>
Use printNode to display a print dialog to your users that will print only the contents of a particular node,
rather than printing the full page.<br />
The printNode function accepts two arguments, both of which are optional.<br />
The node parameter accepts either a DOM node or an element's id string.
If node is null, the contents of fb.topInstance.fbContent will be printed.<br />
You can apply styles to the print node's content using the optional style value.
'style' can be a string of css definitions (like you would place directly in an element's style attribute),
or can be the path to a css file that contains the css definitions to be applied.
</p>

<h5>fb.getElementsByClassName ( className[s], node )</h5>
<p>
Returns an array of elements within 'node' that have a class name of 'className'.<br />
The className parameter can be a simple string or an array of strings. If an array, all elements that have any of the requested classNames will be returned.<br />
The 'node' parameter is optional and will default to the &lt;html&gt; element if not given.
</p>

<h5>fb.getStyle ( node, property, integerize )</h5>
<p>
Returns the cascaded or computed (currently active) style for a given element.<br />
The optional 'property' parameter is any css property. You can use either the css or camelCase property syntax (i.e., 'font-size' or 'fontSize').<br />
If 'property' is not passed, the return value will be a cssText string of all effective styles for the referenced node in the form 'property1: value1; property2: value2;...propertyN: valueN;'.<br />
If the 3rd parameter is 'true', the return value will be an integer.
E.g., a style of '49px' will come back as the number 49.
Example: <span class="code notranslate">size = fb.getStyle( 'someId', 'font-size' )</span>
</p>

<h5>fb.getScrollLeft ( )<br />
fb.getScrollTop ( )</h5>
<p>
Returns the browser's current horizontal or vertical scrollbar position in pixels.
</p>

<h5>fb.getScroll ( )</h5>
<p>
fb.getScroll combines getScrollLeft and getScrollTop into a single call with a return value of an associative array containing the two named values 'left' and 'top'.<br />
Example usage:<span class="blockcode notranslate">
var scroll = fb.getScroll( );<br />
alert( 'horizontal scroll is ' + scroll.left + ' pixels' );<br />
alert( 'vertical scroll is ' + scroll.top + ' pixels' );<br />
</span>
</p>

<h5>fb.getViewportWidth ( )<br />
fb.getViewportHeight ( )</h5>
<p>
Returns the browser's current viewport width or height in pixels.
</p>

<h5>fb.getViewport ( )</h5>
<p>
fb.getViewport combines getViewportWidth and getViewportHeight into a single call with a return value of an associative array containing the two named values 'width' and 'height'.<br />
Example usage:<span class="blockcode notranslate">
var viewport = fb.getViewport( );<br />
alert( 'browser screen is ' + viewport.width + ' wide and ' + viewport.height + ' high' );
</span>
</p>

<h5>fb.getLayout ( node, local )</h5>
<p>
Use getLayout to get the position and dimensions of any node on your page.<br />
getLayout accepts a DOM node or an element's id string and returns an associative array containing the values 'left', 'top', 'width' and 'height'.<br />
If the optional second parameter is true and node is inside an iframe, the returned 'left' and 'top' coordinates will be relative to that iframe's document, otherwise the coordinates are relative to the top page's document.<br />
</p><p>
The getLayout function is similar to the native getBoundingClientRect function except that it can 'see through' iframes and give position coordinates relative to the top document, returns 'width' and 'height' rather than 'right' and 'bottom', and will return layout information for image map area elements.
</p>


<h5>fb.getIframeDocument ( node )<br />
fb.getIframeWindow ( node, allowCrossDomain )</h5>
<p>
These functions return an iframe's document object and window object respectively.<br />
'node' is an optional parameter.
If provided, it must be an iframe element or the iframe element's id.
The iframe does not have to be inside a floatbox.<br />
If 'node' is not passed, the fbContent element for the clicked floatbox or for fb.topInstance will be used.<br />
If the optional 'allowCrossDomain' parameter is passed as true, fb.getIframeWindow will return cross-domain window objects as well as same-domain ones.
This can be useful in setting up HTML5 messaging between cross-domain windows.
</p><p>
Null is returned if node is not an iframe and no floatboxed iframe could be found using the defaults as described above.<br />
</p><p>
The getIframe* functions are also available on individual floatbox instances.
For example, calling <span class="code notranslate">fb.getIframeDocument( )</span>
is the same as calling <span class="code notranslate">fb.topInstance.getIframeDocument( )</span>.<br />
</p><p>
A simple example; get the window object of the iframe in the only running floatbox:<br />
<span class="code notranslate">win = fb.getIframeWindow( )</span>.
</p>

<h5>fb.nodeContains ( parentNode, childNode )</h5>
<p>
fb.nodeContains returns true or false based on whether the DOM element 'childNode' is contained inside the 'parentNode' element.<br />
Both parentNode and childNode are mandatory arguments and can be either the actual DOM element or a string id value that identifies the element.<br />
If parentNode and childNode are the same node, true is returned.<br />
fb.nodeContains will 'see through' iframes.
That is, if childNode is inside an iframe and that iframe is inside parentNode, fb.nodeContains will return true.
</p>

<h5>fb.hasAttribute ( node, attribute )</h5>
<p>
Returns true or false based on whether the DOM element 'node' has 'attribute' set in its tag.<br />
If the node's attribute is set to an empty string, the function still returns true.<br />
The node parameter can be a DOM element or the string id of an element.
</p>

<h5>fb.getOuterHTML ( node )</h5>
<p>
Not all browsers support the outerHTML property.
fb.getOuterHTML will return the outerHTML (innerHTML plus the element's own markup) for any element in all browsers.
</p>

<h5>fb.setInnerHTML ( node, html )</h5>
<p>
This is a safe way to assign innerHTML to any element.
It works reliably on both text/html and application/xhtml-xml pages.<br />
The 'html' parameter is optional and defaults to the empty string.
Applying the empty string clears node of all its existing innerHTML.<br />
If direct assignment of innerHTML works, it is used (it's a lot quicker).
If setting of innerHTML is rejected, DOM insertion methods are used.
</p>

<h5>fb.encodeHTML ( html )<br />
fb.decodeHTML ( html )</h5>
<p>
fb.encodeHTML takes a string and returns that string with all &amp; &lt; &gt; and &quot; characters encoded to &amp;amp; &amp;lt; &amp;gt; and &amp;quot;.<br />
fb.decodeHTML reverses that process and also decodes &amp;apos; to a single quote and decodes numbered entities like &amp;#222; to their character equivalents.
</p>

<h5>fb.typeOf ( thing )</h5>
<p>
The fb.typeOf extends javascript's builtin 'typeof' operator by resolving ambiguous 'object' return values and handling window objects.<br />
The return value will be one of 'number', 'string', 'boolean', 'object', 'array', 'function', 'NaN', 'undefined', 'null', 'node' or 'window'.<br />
Note that IE (all versions) has major problems handling dynamically created and destroyed windows inside iframes.
fb.typeOf will detect a tomb-stoned window in IE and return a value of 'null' for it.
</p>

<h5>fb.forEach ( object, function )</h5>
<p>
Use fb.forEach to execute a function against each member of an associative array (javascript object).
The function takes two parameters which will receive the 'name' and 'value' for each entry in the object.<br />
Example:<span class="blockcode notranslate">
fb.forEach( myObject, function( key, val ) {<br />
&nbsp;&nbsp;alert('name: ' + key + ', value: ' + val);<br />
} );
</p>

<h5>fb.flashObject ( {<br />
&nbsp;&nbsp;&nbsp;&nbsp; source: strURI,<br />
&nbsp;&nbsp;&nbsp;&nbsp; width: numPixels,<br />
&nbsp;&nbsp;&nbsp;&nbsp; height: numPixels,<br />
&nbsp;&nbsp;&nbsp;&nbsp; params: { name: value [, name: value] } | strOptions,<br />
&nbsp;&nbsp;&nbsp;&nbsp; node: node | id,<br />
&nbsp;&nbsp;&nbsp;&nbsp; id: string,<br />
&nbsp;&nbsp;&nbsp;&nbsp; altContent: strHTML,<br />
&nbsp;&nbsp;&nbsp;&nbsp; minVersion: strVersion<br />
} )</h5>
<p>
fb.flashObject is a full-featured, but simple to use, script component that adds flexible cross-browser flash objects to your page.<br />
Because the flash objects are created from external script they will not be subject to Firefox and Opera's annoying (and inconsistent) "click to activate" behaviour.<br />
fb.flashObject supports alternate content, Flash version checking and provisioning of all Flash parameters.
</p>
<ul>
<li><b>source</b> is the path to the swf file.
Allowed aliases for 'source' are 'url', 'uri' and 'href'.</li>
<li><b>width</b> and <b>height</b> are the dimensions of the flash object in pixels.</li>
<li><b>params</b> (optional) is either an associative array or a string of parameters to be assigned.<br />
The default parameters are <span class="code notranslate">{ wmode:'opaque', scale:'exactfit', play:'true', allowFullScreen:'true', allowScriptAccess:'always', quality:'high' }</span>
or, equivalently, <span class="code notranslate">'wmode:opaque scale:exactfit play:true allowFullScreen:true allowScriptAccess:always quality:high'</span>.<br />
(Please see <a href="//kb2.adobe.com/cps/127/tn_12701.html" target="_blank">//kb2.adobe.com/cps/127/tn_12701.html</a> for a complete list of available flash parameters.)
</li>
<li><b>node</b> is an optional parameter that can be a DOM element (normally a span or div) or the string id of an element.
If given, the flash object will be inserted inside the node.
If 'node' is not provided, the flash object is created immediately above the script element that is calling the fb.flashObject function.
</li>
<li>An <b>id</b> can be assigned to the flash object using the optional 'id' parameter.
An id is used when interacting with the flash object using scripted controls.
</li>
<li><b>altContent</b> provides the content that will be shown for client agents that don't have the Flash plugin installed and active.
Provide altContent as a string of HTML.<br />
The default altContent is a short message of "Flash Player is required to view this content",
presented in the localized language of the user's browser,
and followed by a link to the Flash download page.
</li>
<li>Use <b>minVersion</b> to specify the minimum Flash version required to show the swf content.
The version string must include major version, and can include minor and revision levels.
E.g., '8' or '8.1' or '8.1.2'.<br />
If the minimum version requirements are not met, the alternate content will be shown.
The default altContent is "A newer version of Flash Player is required to view this content",
presented in the localized language of the user's browser,
and followed by a link to the Flash download page.
</li>
</ul>
<p>
A simple example:<span class="blockcode notranslate">
fb.flashObject( {<br />
&nbsp;&nbsp;&nbsp;&nbsp;source: 'somePath.swf',<br />
&nbsp;&nbsp;&nbsp;&nbsp;width: 400,<br />
&nbsp;&nbsp;&nbsp;&nbsp;height: 300,<br />
&nbsp;&nbsp;&nbsp;&nbsp;altContent: '&lt;img src="someImage.jpg" /&gt;'<br />
} );
</p>

<h5>fb.ajax ( {<br />
&nbsp;&nbsp;&nbsp;&nbsp; source: strURI,<br />
&nbsp;&nbsp;&nbsp;&nbsp; updateNode: node,<br />
&nbsp;&nbsp;&nbsp;&nbsp; postData: form | formID | formName | object | string,<br />
&nbsp;&nbsp;&nbsp;&nbsp; success: function( xhr ),<br />
&nbsp;&nbsp;&nbsp;&nbsp; failure: function( xhr ),<br />
&nbsp;&nbsp;&nbsp;&nbsp; finish: function( xhr ),<br />
&nbsp;&nbsp;&nbsp;&nbsp; timeout: msecs,<br />
&nbsp;&nbsp;&nbsp;&nbsp; cacheable: boolean,<br />
&nbsp;&nbsp;&nbsp;&nbsp; async: boolean,<br />
&nbsp;&nbsp;&nbsp;&nbsp; headers: { name: value [, name: value] }<br />
} )</h5>
<p>
The fb.ajax function is an XMLHttpRequest object wrapper that provides AJAX functionality for dynamic content and data fetches using a simple and flexible function call.
Both GET and POST requests are supported, a page element can be updated directly with the returned content, callback functions are available for more complex handling requirements, and both synchronous and asynchronous calls are supported.
</p>
<ul>
<li>
The <b>source</b> parameter is mandatory (the others are optional).
This is the URI of the page you are fetching the ajax content from.<br />
'url', 'uri' and 'href' are allowed aliases for the 'source' parameter's name.<br />
Note that ajax calls cannot go across different domains and that the source parameter must reference a resource that's on the same domain as the current page.
For this reason, it's best to use relative URIs in your ajax calls (leave out the "http://someDomain.com" part).
</li><li>
If the <b>updateNode</b> parameter is present, the element referenced by that parameter will be updated with the request's response text from the server.<br />
Use this to automatically populate a div on your page with content from your ajax call.<br />
updateNode can be either a DOM element object or the id of an element.<br />
If there are anchors in the fetched content that are marked up for floatbox behaviour (i.e., have class="floatbox" on them),
or there is other floatbox content such as cyclers or tooltips,
that content will be automatically activated by fb.activateElements after the update.<br />
Any script elements in the incoming content will be reliably executed.
</li><li>
If the <b>postData</b> parameter is present, a POST request will be made to the server.
If postData is not present (or is empty), a GET request will be made.<br />
The postData parameter is versatile:
it can accept a parameter string of encoded name=value pairs separated by ampersands, an associative array (JSON object), a form DOM node, a form's id, or a form's name.<br />
If postData points to a form, the form values will be properly serialized and the resultant encoded parameter string will be sent with the POST request.<br />
Similarly, a JSON object will be serialized to an encoded parameter string.<br />
Note: If you are passing a string directly and any of the name or value components might contain interesting characters, those names and values should be encoded using encodeURIComponent before being concatenated.
</li><li>
The <b>success</b>, <b>failure</b> and <b>finish</b> functions, if present, will be executed when the ajax request has completed.<br />
The single parameter passed to these functions is the XMLHttpRequest object which can be used to access response values such as xhr.status, xhr.responseText and xhr.responseXML.<br />
The success function will fire only if the request succeeds, failure> will fire only in the event of a failure, but finish will always fire (after success or failure).<br />
For legacy support, 'callback' is an allowed alias for the 'finish' parameter name.
</li><li>
The <b>timeout</b> parameter is used to place a limit on how long to wait for a response and is given in milliseconds.<br />
If the request does timeout, neither 'success' nor 'failure' will fire, but the 'finish' callback will.
The finish function can determine that a timeout occurred by checking if xhr.status is 0.
</li><li>
The <b>cacheable</b> parameter defaults to true and is a suggestion to browsers that they can retrieve the content from their local cache if they have it there.
If 'cacheable' is set to false, the source URL will have an additional query string parameter called "no_cache" added to it, and this parameter will be set to a unique numeric string.
This 'no_cache' parameter ensures that the ajax source cannot be fetched from browser cache.
</li><li>
The <b>async</b> parameter defaults to true.
If set to false, javascript processing is suspended until the AJAX fetch completes.
The XMLHttpRequest object is returned by the fb.ajax call and can be used to retrieve the status and response of the completed AJAX fetch.
</li><li>
The <b>headers</b> parameter takes an object of name:value pairs of custom request headers that are to be used in the ajax call.<br />
Headers for caching, posting ('Content-Type'), and 'X-Requested-With' are already provided by the ajax function.<br />
An fb.ajax call with custom headers might look like this:<br />
<span class="code notranslate">fb.ajax({ source:'xyz.php', headers:{ 'Content-Type':'text/xml;charset=utf-8', 'X-My-Header':'MyValue' } });</span>
</ul>
<p>
Here's an example that updates the contents of a div called "contents" and puts the time of the update into a span element using Floatbox's ajax support:<br />
<span class="blockcode notranslate">
&lt;script type="text/javascript"&gt;<br />
&nbsp;&nbsp;// this is the callback function that will be used to add the update time to the page<br />
&nbsp;&nbsp;function updateTime( xhr ) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;fb.setInnerHTML( 'time', (new Date()).toTimeString() );<br />
&nbsp;&nbsp;}<br />
&nbsp;&nbsp;// this is the onclick action that will fire the ajax request<br />
&nbsp;&nbsp;function click( ) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;fb.ajax({ source: 'ajax.php', updateNode: 'contents', success: updateTime });<br />
&nbsp;&nbsp;}<br />
&lt;/script&gt;<br />
<br />
&lt;input type="button" onclick="click();" value="get ajax" /&gt;<br />
<br />
&lt;div id="contents"&gt;&lt;/div&gt;<br />
last update at: &lt;span id="time"&gt;&lt;/span&gt;<br />
</span>
</p>

<p>
<a href="#index">Back to Index</a>
</p>
<div class="separator"></div>

</div>
</body>
</html>
